<template>
	<div>loading...</div>
</template>

<script>
	import * as THREE from './bingdundun.webGL/js/three.module.js';
	import { OrbitControls } from './bingdundun.webGL/js/OrbitControls.js';
	import { GLTFLoader } from './bingdundun.webGL/js/GLTFLoader.js';
	import envImg from './bingdundun.webGL/model/env.jpg';
	import gltf from './bingdundun.webGL/model/dwendwen.gltf';
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {
			let camera, scene, renderer;
			init();
			render();
			function init() {
				const container = document.createElement( 'div' );
				document.body.appendChild( container );
				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 );
				camera.position.set( 0, 0, 3 );
				scene = new THREE.Scene();
				const envmap = new THREE.TextureLoader().load(envImg,function(texture){
					// const loader = new GLTFLoader().setPath( './bingdundun.webGL/model/' );
					// loader.load( 'dwendwen.gltf', function ( gltf ) {
					// 	gltf.scene.traverse( function ( child ) {
					// 		if(child.name=="outer"||child.name=="mask"){
					// 			child.material.envMap = texture;
					// 			child.material.envMap.mapping = THREE.EquirectangularReflectionMapping;
					// 			child.material.envMapIntensity=2;
					// 		}else if(child.name=="body"){
					// 			var map = child.material.map;
					// 			child.material = new THREE.MeshToonMaterial({map:map});
					// 		}
					// 	} );
					// 	scene.add( gltf.scene );
					// 	render();
					// } );
					gltf.scene.traverse( function ( child ) {
						if(child.name=="outer"||child.name=="mask"){
							child.material.envMap = texture;
							child.material.envMap.mapping = THREE.EquirectangularReflectionMapping;
							child.material.envMapIntensity=2;
						}else if(child.name=="body"){
							var map = child.material.map;
							child.material = new THREE.MeshToonMaterial({map:map});
						}
					} );
					scene.add( gltf.scene );
					render();
				});
				renderer = new THREE.WebGLRenderer( { antialias: true } );
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );
				container.appendChild( renderer.domElement );
				const controls = new OrbitControls( camera, renderer.domElement );
				controls.addEventListener( 'change', render ); // use if there is no animation loop
				controls.minDistance = 2;
				controls.maxDistance = 10;
				controls.target.set( 0, 0, - 0.2 );
				controls.update();
				window.addEventListener( 'resize', onWindowResize );
			}
			function onWindowResize() {
				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();
				renderer.setSize( window.innerWidth, window.innerHeight );
				render();
			}
			function render() {
				renderer.render( scene, camera );
			}
		},
		methods: {

		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
